<script setup lang="ts">
import {
  computed,
  nextTick,
  onActivated,
  onMounted,
  onUnmounted,
  ref,
} from 'vue';

import { useVbenModal } from '@vben/common-ui';
import { ChevronsLeft, ChevronsRight, IconifyIcon, Search } from '@vben/icons';

import { message } from 'ant-design-vue';
import dayjs from 'dayjs';

import type { HandCardUsageMonitorItem } from '#/api/spa/handcard/asset';
import {
  getHandCardDashboard,
  getHandCardUsageMonitorPage,
  openHandCard,
} from '#/api/spa/handcard/asset';
import { getHandCardTypePage } from '#/api/spa/handcard/type';
import { $t } from '#/locales';

// 导入模态框组件
import ChildCardModal from './components/ChildCardModal.vue';
import HandCardImportModal from './components/HandCardImportModal.vue';
import MergeCardsModal from './components/MergeCardsModal.vue';
import ModifyStatusModal from './components/ModifyStatusModal.vue';
import OpenedCardsModal from './components/OpenedCardsModal.vue';
import OtaProcessingModal from './components/OtaProcessingModal.vue';
import QuickOrderModal from './components/QuickOrderModal.vue';
import QuickTransferModal from './components/QuickTransferModal.vue';
import ReplaceCardModal from './components/ReplaceCardModal.vue';
import RevokeCardModal from './components/RevokeCardModal.vue';
import SettledBillsModal from './components/SettledBillsModal.vue';
import TeamCardModal from './components/TeamCardModal.vue';

// const popoverTop = ref(0);
// const popoverLeft = ref(0);
const containerRef = ref(null);

// 筛选标签
const filterTabs = ref([
  { key: 'all', label: '全部', code: 'all' },
  // { key: 'male', label: '男宾' },
  // { key: 'female', label: '女宾' }
]);

// 手牌状态
const cardStatuses = [
  {
    key: 'AVAILABLE',
    label: $t('page.spa.handcenter.status.AVAILABLE'),
    color: '#E6E6F0',
  },
  {
    key: 'IN_USE',
    label: $t('page.spa.handcenter.status.IN_USE'),
    color: '#6EFF7A',
  },
  {
    key: 'pending',
    label: $t('page.spa.handcenter.status.pending'),
    color: '#FE7E76',
  },
  {
    key: 'SUSPENDED',
    label: $t('page.spa.handcenter.status.SUSPENDED'),
    color: '#D384FF',
  },
  {
    key: 'selfUse',
    label: $t('page.spa.handcenter.status.selfUse'),
    color: '#80E8FF',
  },
  {
    key: 'overtime',
    label: $t('page.spa.handcenter.status.overtime'),
    color: '#faad14',
  },
  {
    key: 'overLimit',
    label: $t('page.spa.handcenter.status.overLimit'),
    color: '#000000',
  },
];

// 手牌数据类型定义
interface HandCard {
  id: number;
  number: string;
  cardNumber?: string;
  status: string;
  type: string;
  cardTypeName?: string;
  team: string;
  room: string;
  openTime: string;
  createTime?: string;
  totalConsumption: string;
  remarks: string;
  icon?: string;
  timeout?: boolean;
  excess?: boolean;
  // 新增字段（来自监控接口）
  usageId?: string;
  cardId?: string;
  usageStatus?: string;
  groupCode?: string;
  stayMinutes?: number;
}

// 响应式数据
const activeFilter = ref('all');
const activeStatusFilter = ref('all'); // 状态筛选
const selectedCard = ref<HandCard | null>(null);
const searchCardNumber = ref('');
const quickOpenCard = ref(false);
const todayTraffic = ref(234);
const yesterdayTraffic = ref(568);
const rightPanelCollapsed = ref(false); // 右侧面板折叠状态
const isMounted = ref(false); // 组件挂载标志

// 分页相关
const pageNo = ref(1);
const pageSize = ref(100);
const total = ref(0);
const loading = ref(false);
const hasMore = ref(true); // 是否还有更多数据
// 右键菜单
const contextMenu = ref({
  visible: false,
  x: 0,
  y: 0,
  card: null as HandCard | null,
});

const [ChildCardModalTrigger, childCardModalApi] = useVbenModal({
  connectedComponent: ChildCardModal,
  destroyOnClose: true,
});

const [TeamCardModalTrigger, teamCardModalApi] = useVbenModal({
  connectedComponent: TeamCardModal,
  destroyOnClose: true,
});

const [HandCardImportModalTrigger, handCardImportModalApi] = useVbenModal({
  connectedComponent: HandCardImportModal,
  destroyOnClose: true,
});

const [RevokeCardModalTrigger, revokeCardModalApi] = useVbenModal({
  connectedComponent: RevokeCardModal,
  destroyOnClose: true,
});

const [ReplaceCardModalTrigger, replaceCardModalApi] = useVbenModal({
  connectedComponent: ReplaceCardModal,
  destroyOnClose: true,
});

const [ModifyStatusModalTrigger, modifyStatusModalApi] = useVbenModal({
  connectedComponent: ModifyStatusModal,
  destroyOnClose: true,
});

const [QuickOrderModalTrigger, quickOrderModalApi] = useVbenModal({
  connectedComponent: QuickOrderModal,
  destroyOnClose: true,
});

const [QuickTransferModalTrigger, quickTransferModalApi] = useVbenModal({
  connectedComponent: QuickTransferModal,
  destroyOnClose: true,
});

const [MergeCardsModalTrigger, mergeCardsModalApi] = useVbenModal({
  connectedComponent: MergeCardsModal,
  destroyOnClose: true,
});

const [SettledBillsModalTrigger, settledBillsModalApi] = useVbenModal({
  connectedComponent: SettledBillsModal,
  destroyOnClose: true,
});

const [OpenedCardsModalTrigger, openedCardsModalApi] = useVbenModal({
  connectedComponent: OpenedCardsModal,
  destroyOnClose: true,
});

const [OtaProcessingModalTrigger, otaProcessingModalApi] = useVbenModal({
  connectedComponent: OtaProcessingModal,
  destroyOnClose: true,
});

// 手牌数据
const handCards = ref<HandCard[]>([]);
const statusStatistics = ref<Record<string, number>>({});

// 实时统计数据
const statistics = ref({
  total: 0,
  idle: 0,
  occupied: 0,
  pending: 0,
  disabled: 0,
  selfUse: 0,
  overtime: 0,
  overLimit: 0,
});

// // 计算属性
// const filteredCards = computed(() => {
//   let filtered = handCards.value

//   // 性别筛选
//   if (activeFilter.value !== 'all') {
//     filtered = filtered.filter((card) => {
//       if (activeFilter.value === 'male') {
//         return card.type === '男宾'
//       } else if (activeFilter.value === 'female') {
//         return card.type === '女宾'
//       }
//       return true
//     })
//   }

//   // 状态筛选
//   if (activeStatusFilter.value !== 'all') {
//     filtered = filtered.filter(
//       (card) => card.status === activeStatusFilter.value
//     )
//   }

//   return filtered
// })


const contextMenuStyle = computed(() => ({
  left: `${contextMenu.value.x}px`,
  top: `${contextMenu.value.y}px`,
}));

// 方法
const selectCard = (card: HandCard) => {
  // 设置选中的手牌
  selectedCard.value = card;
};

const showContextMenu = (event: MouseEvent, card: HandCard) => {
  event.preventDefault();
  contextMenu.value = {
    visible: true,
    x: event.clientX,
    y: event.clientY,
    card,
  };
};


const getStatusCount = (status: string) => {
  return statusStatistics.value[status] ?? 0;
};

const filterByStatus = (status: string) => {
  activeStatusFilter.value =
    activeStatusFilter.value === status ? 'all' : status;
  getHandCardList(true);
};

const toggleRightPanel = () => {
  rightPanelCollapsed.value = !rightPanelCollapsed.value;
};
const searchCardType = (type: string | number) => {
  // 如果是 'all'，则清除筛选
  if (type === 'all') {
    activeFilter.value = 'all';
  } else {
    // 否则设置为手牌类型ID
    activeFilter.value = String(type);
  }
  // 重置状态筛选
  activeStatusFilter.value = 'all';
  getHandCardList(true);
};
const searchCard = () => {
  getHandCardList(true);
  // if (!searchCardNumber.value) {
  //   message.warning('请输入手牌号')
  //   return
  // }
  // const card = handCards.value.find((c) => c.number === searchCardNumber.value)
  // if (card) {
  //   selectCard(card)
  //   if (quickOpenCard.value) {
  //     // 快速开牌逻辑
  //     message.success(`手牌 ${searchCardNumber.value} 开牌成功`)
  //   }
  // } else {
  //   message.error(`未找到手牌号 ${searchCardNumber.value}`)
  // }
};

// 功能按钮方法
const openChildCard = (card?: HandCard | null) => {
  childCardModalApi
    .setData({
      cardNumber: card?.cardNumber || card?.number || '',
    })
    .open();
};

const openTeamCard = () => {
  teamCardModalApi.setData(null).open();
};

const revokeCard = (card?: HandCard | null) => {
  revokeCardModalApi
    .setData({
      cardNumber: card?.cardNumber || card?.number || '',
    })
    .open();
};

const replaceCard = (card?: HandCard | null) => {
  replaceCardModalApi
    .setData({
      oldCardNumber: card?.cardNumber || card?.number || '',
    })
    .open();
};
const modifyStatus = (card?: HandCard | null) => {
  modifyStatusModalApi
    .setData({
      cardNumber: card?.cardNumber || card?.number || '',
    })
    .open();
};

const quickOrder = (card?: HandCard | null) => {
  quickOrderModalApi
    .setData({
      cardNumber: card?.cardNumber || card?.number || '',
    })
    .open();
};

const quickTransfer = (card?: HandCard | null) => {
  quickTransferModalApi
    .setData({
      fromCardNumber: card?.cardNumber || card?.number || '',
    })
    .open();
};

const mergeCards = () => {
  mergeCardsModalApi.setData(null).open();
};

const showSettledBills = () => {
  settledBillsModalApi.setData(null).open();
};

const showOpenedCards = () => {
  openedCardsModalApi.setData(null).open();
};

const showOtaProcessing = () => {
  otaProcessingModalApi.setData(null).open();
};

// 右键菜单方法
const placeOrder = () => {
  quickOrder(contextMenu.value.card);
  contextMenu.value.visible = false;
};

const writeCard = () => {
  message.info('手牌写卡功能');
  contextMenu.value.visible = false;
};


// 键盘快捷键
const handleKeydown = (event: KeyboardEvent) => {
  // 如果焦点在输入框或其他可编辑元素上，不处理快捷键
  const target = event.target as HTMLElement;
  if (
    target.tagName === 'INPUT' ||
    target.tagName === 'TEXTAREA' ||
    target.isContentEditable
  ) {
    return;
  }

  switch (event.key) {
    case 'F1': {
      event.preventDefault();
      event.stopPropagation();
      openChildCard();
      break;
    }
    case 'F2': {
      event.preventDefault();
      event.stopPropagation();
      openTeamCard();
      break;
    }
    case 'F3': {
      event.preventDefault();
      event.stopPropagation();
      revokeCard(selectedCard.value);
      break;
    }
    case 'F4': {
      event.preventDefault();
      event.stopPropagation();
      replaceCard();
      break;
    }
    case 'F5': {
      event.preventDefault();
      event.stopPropagation();
      modifyStatus();
      break;
    }
    case 'F6': {
      event.preventDefault();
      event.stopPropagation();
      quickOrder();
      break;
    }
    case 'F7': {
      event.preventDefault();
      event.stopPropagation();
      quickTransfer();
      break;
    }
    case 'F8': {
      event.preventDefault();
      event.stopPropagation();
      mergeCards();
      break;
    }
    case 'F9': {
      event.preventDefault();
      event.stopPropagation();
      showSettledBills();
      break;
    }
    case 'F10': {
      event.preventDefault();
      event.stopPropagation();
      showOpenedCards();
      break;
    }
    case 'F11': {
      event.preventDefault();
      event.stopPropagation();
      showOtaProcessing();
      break;
    }
  }
};
const formatDateTime = (time: any) => {
  return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
};

// 格式化时长（分钟转为小时分钟）
const formatDuration = (minutes?: number) => {
  if (!minutes || minutes <= 0) return '-';
  const hours = Math.floor(minutes / 60);
  const mins = minutes % 60;
  if (hours > 0) {
    return `${hours}时${mins}分`;
  }
  return `${mins}分`;
};

// 格式化金额
const formatAmount = (amount?: string | number) => {
  if (!amount) return '¥0';
  const num = typeof amount === 'string' ? parseFloat(amount) : amount;
  if (isNaN(num)) return '¥0';
  return `¥${num.toFixed(2)}`;
};
// const getHandCardStatus = () => {
//   const aaaa = getDictOptions(DICT_SPA_TYPE.HandCardStatus, 'string');
// };
const getHandCardType = () => {
  getHandCardTypePage({ pageNo: 1, pageSize: 100 }).then((res: any) => {
    if (res.total > 0) {
      res.list.forEach((item: any) => {
        filterTabs.value.push({
          label: item.typeName,
          key: item.id,
          code: item.typeCode,
        });
      });
    }
  });
};
const fetchStatusStatistics = () => {
  getHandCardDashboard()
    .then((res) => {
      // 更新实时统计数据
      statistics.value = {
        total: res.totalHandCardCount || 0,
        idle: res.freeCount || 0,
        occupied: res.occupiedCount || 0,
        pending: res.pendingCount || 0,
        disabled: res.forbiddenCount || 0,
        selfUse: res.selfUseCount || 0,
        overtime: res.overtimeCount || 0,
        overLimit: res.overLimitCount || 0,
      };

      // 更新客流数据
      todayTraffic.value = res.todayFlow || 0;
      yesterdayTraffic.value = res.yesterdayFlow || 0;

      // 同时更新状态统计（用于状态筛选区显示）
      const stats: Record<string, number> = {
        AVAILABLE: res.freeCount || 0,
        IN_USE: res.occupiedCount || 0,
        pending: res.pendingCount || 0,
        SUSPENDED: res.forbiddenCount || 0,
        selfUse: res.selfUseCount || 0,
        overtime: res.overtimeCount || 0,
        overLimit: res.overLimitCount || 0,
      };
      statusStatistics.value = stats;
    })
    .catch((error) => {
      console.error('获取实时统计失败:', error);
      // 重置为默认值
      statistics.value = {
        total: 0,
        idle: 0,
        occupied: 0,
        pending: 0,
        disabled: 0,
        selfUse: 0,
        overtime: 0,
        overLimit: 0,
      };
      statusStatistics.value = {};
    });
};

// 构建查询参数
const buildQueryParams = (currentPage: number = pageNo.value) => {
  const params: any = {
    pageNo: currentPage,
    pageSize: pageSize.value,
    onlyActive: false, // 显示所有手牌，包括已关卡的
  };

  // 添加手牌号搜索
  if (searchCardNumber.value) {
    params.cardNumber = searchCardNumber.value;
  }

  // 添加手牌类型筛选（顶部导航分类）
  if (activeFilter.value !== 'all') {
    const typeId = Number(activeFilter.value);
    if (!isNaN(typeId)) {
      params.cardTypeId = typeId;
    }
  }

  // 添加状态筛选（右侧状态筛选区）
  if (activeStatusFilter.value !== 'all') {
    params.cardStatus = activeStatusFilter.value;
  }

  return params;
};

// 数据映射函数
const mapMonitorItemToHandCard = (item: HandCardUsageMonitorItem): HandCard => {
  // 格式化开牌时间
  const openTimeStr = item.openTime
    ? dayjs(item.openTime).format('YYYY-MM-DD HH:mm:ss')
    : '';

  return {
    id: Number(item.cardId) || 0,
    number: item.cardNumber || '',
    cardNumber: item.cardNumber,
    status: item.cardStatus || '',
    type: '', // 新接口中没有 cardTypeName
    cardTypeName: '', // 新接口中没有 cardTypeName
    team: item.teamName || '',
    room: item.groupCode || '',
    openTime: openTimeStr,
    createTime: openTimeStr,
    totalConsumption: String(item.consumptionTotalAmount || 0),
    remarks: item.remarks || '',
    usageId: item.usageId,
    cardId: item.cardId,
    usageStatus: item.usageStatus,
    groupCode: item.groupCode,
    stayMinutes: item.stayMinutes,
  } as HandCard;
};

// 加载手牌列表（重置数据）
const getHandCardList = (reset: boolean = true) => {
  if (reset) {
    pageNo.value = 1;
    handCards.value = [];
    hasMore.value = true;
  }

  if (loading.value || !hasMore.value) {
    return;
  }

  loading.value = true;

  getHandCardUsageMonitorPage(buildQueryParams())
    .then((res: any) => {
      total.value = res.total || 0;
      const newCards = res.list.map(mapMonitorItemToHandCard);

      if (reset) {
        handCards.value = newCards;
      } else {
        handCards.value.push(...newCards);
      }

      // 判断是否还有更多数据
      hasMore.value =
        handCards.value.length < total.value &&
        res.list.length === pageSize.value;
    })
    .catch((error) => {
      console.error('获取手牌列表失败:', error);
    })
    .finally(() => {
      loading.value = false;
      fetchStatusStatistics();
    });
};

// 加载更多数据（滚动加载）
const loadMore = () => {
  if (loading.value || !hasMore.value) {
    return;
  }

  pageNo.value += 1;
  getHandCardList(false);
};

// 手动分页切换
const handlePageChange = (newPage: number) => {
  pageNo.value = newPage;
  getHandCardList(true);
};

// 滚动处理函数
const handleScroll = (event: Event) => {
  const target = event.target as HTMLElement;
  if (!target) return;

  // 计算是否滚动到底部（距离底部 100px 时触发）
  const scrollBottom =
    target.scrollHeight - target.scrollTop - target.clientHeight;
  if (scrollBottom < 100 && hasMore.value && !loading.value) {
    loadMore();
  }
};
onActivated(() => {});
// 生命周期
onMounted(() => {
  isMounted.value = true;
  document.addEventListener('keydown', handleKeydown);
  document.addEventListener('click', (event) => {
    // 如果点击的是右键菜单，不关闭
    if ((event.target as Element | null)?.closest?.('.context-menu')) {
      return;
    }
    contextMenu.value.visible = false;
    // 如果点击的不是手牌单元格，取消选中
    if (
      !(event.target as Element | null)?.closest?.('.room-cell-wrapper')
    ) {
      selectedCard.value = null;
    }
  });
  document.addEventListener('dblclick', (event) => {
    const target = event.target as Element | null;
    const roomCellWrapper = target?.closest?.('.room-cell-wrapper') as HTMLElement | null;
    if (roomCellWrapper) {
      const cardNumber = roomCellWrapper.dataset.cardnumber;
      if (cardNumber) {
        openHandCard({
          cardNumber,
          depositAmount: 100,
          remark: '开牌',
        }).then(() => {
          message.success(`手牌 ${cardNumber} 开牌成功`);
          getHandCardList(true);
        });
      }
    }
  });
  nextTick(() => {
    // //手牌状态
    // getHandCardStatus()
    // 手牌类型
    getHandCardType();
    // 获取手牌列表
    getHandCardList(true);
  });
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});
</script>

<template>
  <div class="spa-hand-card-center"> 
    <div
      class="main-content"
      :class="{ 'panel-collapsed': rightPanelCollapsed }"
    >
      <!-- 左侧手牌网格 -->
      <div class="hand-card-grid-container">
        <!-- 筛选和搜索区域 -->
        <div class="filter-section">
          <div class="filter-tabs">
            <a-button
              v-for="tab in filterTabs"
              :key="tab.key"
              :type="activeFilter === tab.key ? 'primary' : 'default'"
              @click="searchCardType(tab.key)"
            >
              <!-- {{ tab.label }} -->
              {{ $t(`page.spa.handcenter.search.${tab.code}`) }}
            </a-button>
          </div>

          <div class="search-section">
            <a-input
              v-model:value="searchCardNumber"
              :placeholder="$t('page.spa.handcenter.placeholder.cardnumber')"
              style="width: 200px; margin-right: 8px"
              @keyup.enter="searchCard"
            />
            <a-button type="primary" @click="searchCard">
              <Search />
            </a-button>
           
            
            <a-checkbox
              v-model:checked="quickOpenCard"
              style="margin-left: 16px"
            >
              {{ $t('page.spa.handcenter.search.quickcard') }}
            </a-checkbox>
          </div>
        </div>
        <!-- 手牌网格 -->
        <div
          class="hand-card-grid"
          ref="containerRef"
          @scroll="handleScroll"
        >
          <a-popover
            v-for="card in handCards"
            :key="card.id"
            trigger="hover"
            placement="rightTop"
            :overlay-style="{ marginLeft: '8px' }"
          >
            <template #content>
              <div class="card-popover-content">
                <a-row>
                  <a-col :span="12">手牌号</a-col>
                  <a-col :span="12">{{ card.cardNumber || card.number }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">类型</a-col>
                  <a-col :span="12">{{ card.cardTypeName || card.type }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">状态</a-col>
                  <a-col :span="12">{{ card.status }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">团队</a-col>
                  <a-col :span="12">{{ card.team || '-' }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">房间号</a-col>
                  <a-col :span="12">{{ card.room || '-' }}</a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">开牌时间</a-col>
                  <a-col :span="12">
                    {{ formatDateTime(card.createTime || card.openTime) || '-' }}
                  </a-col>
                </a-row>
                <a-row>
                  <a-col :span="12">累计消费</a-col>
                  <a-col :span="12">¥{{ card.totalConsumption || '0.00' }}</a-col>
                </a-row>
                <a-row v-if="card.remarks">
                  <a-col :span="12">备注</a-col>
                  <a-col :span="12">{{ card.remarks }}</a-col>
                </a-row>
              </div>
            </template>
            <div
              :data-cardnumber="card.cardNumber || card.number"
              class="room-cell-wrapper"
              @click="selectCard(card)"
              @contextmenu="showContextMenu($event, card)"
            >
              <div
                :class="[
                  'room-cell',
                  `status-${card.status}`,
                  { 'is-selected': selectedCard?.id === card.id },
                ]"
                :style="{
                  backgroundColor: cardStatuses.find((s) => s.key === card.status)
                    ?.color,
                }"
              >
                <!-- 选中状态指示器：顶部黄色三角形 + 黑色勾选图标 -->
                <div v-if="selectedCard?.id === card.id" class="selected-badge">
                  <IconifyIcon
                    icon="material-symbols:check"
                    class="selected-check-icon"
                  />
                </div>
                <div class="room-cell-content">
                  <div class="room-number">
                    {{ card.cardNumber || card.number }}
                  </div>
                  <div class="room-info-section">
                    <div v-if="card.stayMinutes !== undefined && card.stayMinutes > 0" class="info-row">
                      <span class="info-value">{{ formatDuration(card.stayMinutes) }}</span>
                    </div>
                    <div v-if="card.status !== 'AVAILABLE' && card.totalConsumption" class="info-row">
                      <span class="info-value amount">{{ formatAmount(card.totalConsumption) }}</span>
                    </div>
                  </div>
                  <div v-if="card.cardTypeName || card.type" class="room-type-tag">
                    {{ card.cardTypeName || card.type }}
                  </div>
                </div>
                <div class="status-indicator">
                  <!-- 
                    状态图标显示优先级：
                    1. 业务状态：超时alarm、超额等
                    2. 默认：不显示图标（主状态已通过背景颜色区分）
                    注意：选中状态已移至顶部显示
                  -->
                  
                  <!-- 业务状态 - 超时alarm -->
                  <IconifyIcon
                    v-if="card.timeout"
                    icon="fluent:clock-alarm-16-filled"
                    class="status-icon timeout-icon"
                  />
                  <!-- 业务状态 - 超额 -->
                  <IconifyIcon
                    v-else-if="card.excess"
                    icon="lsicon:amount-yuan-filled"
                    class="status-icon excess-icon"
                  />
                  <!-- 默认：不显示图标，主状态已通过背景颜色区分 -->
                </div>
              </div>
            </div>
          </a-popover>
        </div>

        <!-- 加载状态和分页 -->
        <div class="pagination-section">
          <!-- 加载提示 -->
          <div v-if="loading" class="loading-tip">
            <a-spin size="small" />
            <span style="margin-left: 8px">加载中...</span>
          </div>
          <!-- 没有更多数据提示 -->
          <div v-else-if="!hasMore && handCards.length > 0" class="no-more-tip">
            已加载全部数据（共 {{ total }} 条）
          </div>
          <!-- 手动分页 -->
          <div v-if="total > 0" class="manual-pagination">
            <a-pagination
              v-model:current="pageNo"
              :total="total"
              :page-size="pageSize"
              :show-size-changer="false"
              :show-quick-jumper="true"
              size="small"
              @change="handlePageChange"
            />
            <span class="pagination-info">
              共 {{ total }} 条，当前第 {{ pageNo }} / {{ Math.ceil(total / pageSize) || 1 }} 页
            </span>
          </div>
        </div>
      </div>

      <!-- 右侧功能面板 -->
      <div class="right-panel" :class="{ collapsed: rightPanelCollapsed }">
        <!-- 折叠按钮 -->
        <div class="collapse-button" @click.stop="toggleRightPanel">
          <ChevronsRight v-show="rightPanelCollapsed" class="size-4" />
          <ChevronsLeft v-show="!rightPanelCollapsed" class="size-4" />
        </div>

        <!-- 手牌状态筛选区 -->
        <div class="status-filter-section-right">
          <h3>{{ $t('page.spa.handcenter.status.title') }}</h3>
          <div class="status-filter-items">
            <div
              v-for="status in cardStatuses"
              :key="status.key"
              class="status-filter-item"
              :class="{ active: activeStatusFilter === status.key }"
              @click.stop="filterByStatus(status.key)"
            >
              <IconifyIcon
                v-if="status.key === 'overLimit'"
                icon="lsicon:amount-yuan-outline"
                width="16"
                height="16"
              />
              <IconifyIcon
                v-else-if="status.key === 'overtime'"
                icon="fluent:clock-alarm-16-regular"
                width="16"
                height="16"
              />
              <div
                v-else
                class="status-color"
                :class="`status-${status.key}`"
              ></div>

              <!--  -->
              <span class="status-label">
                {{ status.label }}
              </span>
              <span class="status-count">
                ({{ getStatusCount(status.key) }})
              </span>
            </div>
          </div>
        </div>

        <!-- 功能按钮区域 -->
        <div class="function-buttons">
          <h3>{{ $t('page.spa.handcenter.operation.title') }}</h3>
          <div class="shortcut-buttons">
            <!-- 快捷按钮组 -->
            <div class="button-group">
              <div class="button-item">
                <a-button
                  class="shortcut-btn"
                  style="background: #fff799"
                  @click="openChildCard"
                >
                  <span class="f-key">F1</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.childcard') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  style="background: #99ecff"
                  class="shortcut-btn"
                  @click="openTeamCard"
                >
                  <span class="f-key">F2</span>
                  <a-badge count="10" :overflow-count="99" class="badge" />
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.teamcard') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  style="background: #f99"
                  class="shortcut-btn"
                  @click="revokeCard"
                >
                  <span class="f-key">F3</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.revokecard') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  style="background: #99ffa2"
                  class="shortcut-btn"
                  @click="replaceCard"
                >
                  <span class="f-key">F4</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.changecard') }}
                </div>
              </div>
            </div>
            <div class="button-group">
              <div class="button-item">
                <a-button
                  style="background: #da99ff"
                  class="shortcut-btn"
                  @click="modifyStatus"
                >
                  <span class="f-key">F5</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.updatestate') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  class="shortcut-btn"
                  style="background: #99ffda"
                  @click="quickOrder"
                >
                  <span class="f-key">F6</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.quickorder') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  style="background: #ffbe99"
                  class="shortcut-btn"
                  @click="quickTransfer"
                >
                  <span class="f-key">F7</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.quicktransfer') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  style="background: #99f"
                  class="shortcut-btn"
                  @click="mergeCards"
                >
                  <span class="f-key">F8</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.mergecard') }}
                </div>
              </div>
            </div>

            <div class="button-group">
              <div class="button-item">
                <a-button
                  style="background: #63b8ff"
                  class="shortcut-btn"
                  @click="showSettledBills"
                >
                  <span class="f-key">F9</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.closedbill') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  class="shortcut-btn"
                  style="background: #e0ffff"
                  @click="showOpenedCards"
                >
                  <span class="f-key">F10</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.openedcard') }}
                </div>
              </div>
              <div class="button-item">
                <a-button
                  style="background: #ffe1ff"
                  class="shortcut-btn"
                  @click="showOtaProcessing"
                >
                  <span class="f-key">F11</span>
                </a-button>
                <div class="btn-label">
                  {{ $t('page.spa.handcenter.operation.ota') }}
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 统计信息区域 -->
        <div class="statistics-section">
          <h3>{{ $t('page.spa.handcenter.statistics.title') }}</h3>
          <div class="statistics-grid">
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.total') }}
              </div>
              <div class="stat-value">{{ statistics.total }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.busy') }}
              </div>
              <div class="stat-value">{{ statistics.idle }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.occupied') }}
              </div>
              <div class="stat-value">{{ statistics.occupied }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.waiting') }}
              </div>
              <div class="stat-value">{{ statistics.pending }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.disabled') }}
              </div>
              <div class="stat-value">{{ statistics.disabled }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.self') }}
              </div>
              <div class="stat-value">{{ statistics.selfUse }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.timeout') }}
              </div>
              <div class="stat-value">{{ statistics.overtime }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">
                {{ $t('page.spa.handcenter.statistics.over') }}
              </div>
              <div class="stat-value">{{ statistics.overLimit }}</div>
            </div>
          </div>

          <div class="traffic-info">
            <div class="traffic-item">
              <span>{{ $t('page.spa.handcenter.statistics.today') }}</span>
              <span class="traffic-number">{{ todayTraffic }}</span>
            </div>
            <div class="traffic-item">
              <span>{{ $t('page.spa.handcenter.statistics.yesterday') }}</span>
              <span class="traffic-number">{{ yesterdayTraffic }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右键菜单 -->
    <div
      v-if="contextMenu.visible"
      class="context-menu"
      :style="contextMenuStyle"
      @click.stop
    >
      <div class="menu-item" @click.stop="placeOrder">
        下单
      </div>
      <div
        class="menu-item"
        @click.stop="() => openChildCard(contextMenu.card)"
      >
        儿童手牌
      </div>
      <div class="menu-item" @click.stop="openTeamCard">
        团队开牌
      </div>
      <div
        class="menu-item"
        @click.stop="() => revokeCard(contextMenu.card)"
      >
        撤销手牌
      </div>
      <div class="menu-item" @click.stop="mergeCards">
        合并手牌
      </div>
      <div
        class="menu-item"
        @click.stop="() => modifyStatus(contextMenu.card)"
      >
        修改状态
      </div>
      <div
        class="menu-item"
        @click.stop="() => replaceCard(contextMenu.card)"
      >
        更换手牌
      </div>
      <div
        class="menu-item"
        @click.stop="() => quickTransfer(contextMenu.card)"
      >
        快速转账
      </div>
      <div class="menu-item" @click.stop="writeCard">
        手牌写卡
      </div>
      <div class="menu-item" @click.stop="writeCard">
        备注
      </div>
      <div class="menu-item" @click.stop="contextMenu.visible = false">
        取消
      </div>
    </div>

    <!-- 模态框组件 -->
    <template v-if="isMounted">
      <ChildCardModalTrigger @success="getHandCardList" />
      <TeamCardModalTrigger @success="getHandCardList" />
      <RevokeCardModalTrigger @success="getHandCardList" />
      <ReplaceCardModalTrigger @success="getHandCardList" />
      <ModifyStatusModalTrigger @success="getHandCardList" />
      <QuickOrderModalTrigger @success="getHandCardList" />
      <QuickTransferModalTrigger @success="getHandCardList" />
      <MergeCardsModalTrigger @success="getHandCardList" />
      <SettledBillsModalTrigger @success="getHandCardList" />
      <OpenedCardsModalTrigger @success="getHandCardList" />
      <OtaProcessingModalTrigger @success="getHandCardList" />
      <HandCardImportModalTrigger @success="getHandCardList" />
    </template>
  </div>
</template>

<style scoped>
/* 响应式设计 - 小屏幕适配 */
@media (max-height: 600px) {
  .right-panel {
    gap: 12px;
    padding-top: 60px;
  }

  .right-panel .function-buttons,
  .right-panel .statistics-section,
  .right-panel .status-filter-section-right {
    padding: 12px;
  }

  .right-panel .function-buttons h3,
  .right-panel .statistics-section h3,
  .right-panel .status-filter-section-right h3 {
    margin: 0 0 10px;
    font-size: 14px;
  }

  .right-panel .button-grid {
    gap: 6px;
  }

  .right-panel .button-grid .ant-btn {
    padding: 4px 8px;
    font-size: 12px;
  }

  .right-panel .statistics-grid {
    gap: 6px;
  }

  .right-panel .stat-item {
    padding: 6px;
  }

  .right-panel .stat-label {
    font-size: 10px;
  }

  .right-panel .stat-value {
    font-size: 14px;
  }
}

@media (max-width: 1200px) {
  .right-panel {
    width: 280px;
  }

  .main-content {
    padding-right: 300px;
  }

  .main-content.panel-collapsed {
    padding-right: 100px;
  }
}

.shortcut-buttons {
  /* padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}

.button-group {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 10px;
}

.button-item {
  text-align: center;
}

.shortcut-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  padding: 0;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  border-radius: 8px;
  transition: transform 0.2s ease;
}

.shortcut-btn:hover {
  transform: scale(1.05);
}

.f-key {
  width: 48px;
  height: 48px;
  font-size: 18px;
  font-weight: bold;
  line-height: 48px;
  color: black;
  text-shadow: 1px 1px 2px rgb(0 0 0 / 30%);

  /* padding: 10px; */
  border: 2px solid #fff;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 10;
  min-width: 16px;
  height: 16px;
  font-size: 10px;
  line-height: 16px;
  color: white;
  background-color: #f44336;
  border-radius: 50%;
}

.btn-label {
  margin-top: 4px;
  font-size: 12px;
  color: #333;
}

.room-cell {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  width: 130px;
  height: 82px;
  padding: 0;
  font-size: 11px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.room-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-color: #d0d0d0;
}

.room-cell.is-selected {
  border-color: #1890ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.3);
}

/* 选中状态指示器：顶部黄色三角形 */
.selected-badge {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 26px 26px 0;
  border-color: transparent #ffd700 transparent transparent;
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 3px 5px 0 0;
  pointer-events: none;
}

.selected-check-icon {
  width: 14px;
  height: 14px;
  color: #000000;
  font-weight: bold;
  display: block;
}

.room-cell-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  padding: 6px 6px 4px;
  background-color: inherit;
}

.room-number {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
  text-align: left;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

.room-info-section {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 3px;
  min-height: 28px;
}

.info-row {
  display: flex;
  align-items: center;
  line-height: 1.3;
}

.info-value {
  color: #333;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.info-value.amount {
  color: #f5222d;
  font-weight: 600;
  font-size: 11px;
}

.room-type-tag {
  display: inline-block;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 500;
  color: #666;
  background-color: #f5f5f5;
  border-radius: 3px;
  text-align: center;
  align-self: flex-start;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.status-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  height: 100%;
  background-color: #f0f0f0;
  border-left: 1px solid #e8e8e8;
  border-radius: 0 6px 6px 0;
  transition: all 0.2s ease;
}

/* 选中状态已移至顶部，此处不再需要特殊样式 */

/* 主状态对应的状态指示器背景色 */
/* 空闲状态 */
.status-AVAILABLE .status-indicator {
  background-color: #e6e6f0;
  border-left-color: #d0d0d0;
}

/* 占用状态 */
.status-IN_USE .status-indicator {
  background-color: #6eff7a;
  border-left-color: #52c41a;
}

.status-pending .status-indicator {
  background-color: #fe7e76;
  border-left-color: #ff4d4f;
}

.status-SUSPENDED .status-indicator {
  background-color: #d384ff;
  border-left-color: #b339ff;
}

.status-selfUse .status-indicator {
  background-color: #80e8ff;
  border-left-color: #40a9ff;
}

.status-overtime .status-indicator {
  background-color: #faad14;
  border-left-color: #fa8c16;
}

.status-overLimit .status-indicator {
  background-color: #000000;
  border-left-color: #000000;
}

.status-icon {
  width: 18px;
  height: 18px;
}

/* 选中图标已移至顶部，此处不再需要 */

.timeout-icon {
  color: #ffffff;
}

/* 超额图标：白色（在黑色背景上显示） */
.excess-icon {
  color: #ffffff;
}

.spa-hand-card-center {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
  background-color: #f5f5f5;
}

.main-content {
  display: flex;
  flex: 1;
  min-height: 0; /* 允许flex子项收缩 */
  padding: 16px;
  padding-right: 390px; /* 为右侧面板留出空间 */
  overflow: hidden;
  transition: padding-right 0.3s ease;
}

.main-content.panel-collapsed {
  padding-right: 100px; /* 右侧面板折叠时的空间 */
}

.hand-card-grid-container {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0; /* 允许flex子项收缩 */
  overflow: hidden;
  background: white;
  border-radius: 8px;
}

.filter-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.filter-tabs {
  display: flex;
  gap: 8px;
}

.search-section {
  display: flex;
  align-items: center;
}

.hand-card-grid {
  display: grid;
  flex: 1;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px;
  min-height: 280px;
  padding: 16px;
  overflow-y: auto;
  align-items: start;
}

.pagination-section {
  padding: 16px;
  border-top: 1px solid #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: white;
  flex-shrink: 0;
}

.loading-tip,
.no-more-tip {
  display: flex;
  align-items: center;
  color: #666;
  font-size: 14px;
}

.manual-pagination {
  display: flex;
  align-items: center;
  gap: 16px;
}

.pagination-info {
  color: #666;
  font-size: 14px;
}

.hand-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 54px;
  cursor: pointer;
  border: 1px solid #d9d9d9;
  border-radius: 6px;
  transition: all 0.2s;
}

.hand-card:hover {
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transform: translateY(-2px);
}

.room-cell.is-selected {
  position: relative;
  transition: all 0.2s ease;
}

.card-number {
  font-size: 16px;
  font-weight: bold;
  color: #333;
}

.card-status {
  margin-top: 4px;
  font-size: 12px;
  color: #666;
}

.card-icon {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #fe7e76;
}

/* 右侧面板样式已在上面重新定义 */

.function-buttons,
.statistics-section {
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.function-buttons h3,
.statistics-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #333;
}

.button-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.button-grid .ant-btn {
  justify-content: flex-start;
  text-align: left;
}

.statistics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}

.stat-item {
  padding: 8px;
  text-align: center;
  background: #f8f9fa;
  border-radius: 4px;
}

.stat-label {
  margin-bottom: 4px;
  font-size: 12px;
  color: #666;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #1890ff;
}

.traffic-info {
  padding-top: 12px;
  border-top: 1px solid #f0f0f0;
}

.traffic-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.traffic-number {
  font-weight: bold;
  color: #1890ff;
}

.card-detail-panel {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 100vh;
  background: white;
  border-left: 1px solid #d9d9d9;
  box-shadow: -2px 0 8px rgb(0 0 0 / 10%);
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid #f0f0f0;
}

.detail-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.detail-content {
  flex: 1;
  padding: 16px;
  overflow-y: auto;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
}

.detail-item label {
  min-width: 80px;
  font-weight: bold;
  color: #666;
}

.context-menu {
  position: fixed;
  z-index: 1001;
  min-width: 120px;
  background: white;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgb(0 0 0 / 15%);
}

.menu-item {
  padding: 8px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.menu-item:hover {
  background-color: #f5f5f5;
}

/* 状态样式 */
.status-AVAILABLE {
  background-color: #e6e6f0 !important;
}

.status-IN_USE {
  /* color: white; */
  background-color: #6eff7a !important;
}

.status-IN_USE .status-indicator {
  background-color: #08d919;
}

.status-pending {
  /* color: white; */
  background-color: #fe7e76 !important;
}

.status-pending .status-indicator {
  background-color: #ff2d1e;
}

.status-SUSPENDED {
  /* color: white; */
  background-color: #d384ff !important;
}

.status-SUSPENDED .status-indicator {
  background-color: #b939ff;
}

.status-selfUse {
  /* color: white; */
  background-color: #80e8ff !important;
}

.status-selfUse .status-indicator {
  background-color: #1cd6ff;
}

.status-overtime {
  /* color: white; */
  background-color: #faad14 !important;
}

.status-overLimit {
  /* color: white; */
  background-color: #000 !important;
}

/* 右侧面板折叠样式 */
.right-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 370px;
  max-height: 100vh; /* 限制最大高度 */
  padding: 16px;
  padding-top: 80px; /* 为顶部导航留出空间 */
  overflow-y: auto; /* 添加垂直滚动 */
  background: white;
  border-left: 1px solid #d9d9d9;
  box-shadow: -2px 0 8px rgb(0 0 0 / 10%);
  transition: all 0.3s ease;
}

.right-panel.collapsed {
  width: 80px;
  padding: 12px 6px;
}

.right-panel.collapsed .function-buttons,
.right-panel.collapsed .statistics-section {
  display: none;
}

.right-panel.collapsed .status-filter-section-right {
  padding: 6px;
  margin-top: 150px;
  margin-bottom: 6px;
}

.right-panel.collapsed .status-filter-section-right h3 {
  margin: 0 0 6px;
  font-size: 10px;
  text-align: center;
}

.right-panel.collapsed .status-filter-items {
  gap: 2px;
}

.right-panel.collapsed .status-filter-item {
  flex-direction: column;
  align-items: center;
  width: 80px;
  padding: 1px 2px;
  font-size: 8px;
  text-align: center;
}

.right-panel.collapsed .status-color {
  width: 10px;
  height: 10px;
  margin-bottom: 1px;
}

.right-panel.collapsed .status-label {
  font-size: 8px;
  line-height: 1;
}

.right-panel.collapsed .status-count {
  font-size: 7px;
  line-height: 1;
}

.collapse-button {
  position: absolute;
  top: 50%;
  left: -5px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 60px;
  color: white;
  cursor: pointer;
  background: #1890ff;
  border-radius: 4px 0 0 4px;
  transform: translateY(-50%);
  transition: all 0.3s ease;
}

.collapse-button:hover {
  background: #40a9ff;
}

.collapse-button :deep(.size-4) {
  width: 16px;
  height: 16px;
  color: white;
}

/* 右侧状态筛选区样式 */
.status-filter-section-right {
  padding: 16px;

  /* margin-bottom: 16px; */
  background: white;
  border-radius: 8px;
}

.status-filter-section-right h3 {
  margin: 0 0 12px;
  font-size: 16px;
  color: #333;
}

.status-filter-title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #666;
}

.status-filter-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.status-filter-item {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.2s;
}

.status-filter-item:hover {
  background-color: #f5f5f5;
  border-color: #d9d9d9;
}

.status-filter-item.active {
  color: #1890ff;
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.status-color {
  width: 16px;
  height: 16px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
}

.status-label {
  color: #333;
}

.status-count {
  font-size: 11px;
  color: #666;
}

.room-cell-wrapper {
  cursor: pointer;
}

.card-popover-content {
  min-width: 200px;
}

.card-popover-content .ant-row {
  margin-bottom: 8px;
  font-size: 12px;
}

.card-popover-content .ant-col:first-child {
  color: #666;
  font-weight: 500;
}

.card-popover-content .ant-col:last-child {
  color: #333;
  text-align: right;
}
</style>
